<template>
  首页
  <div style="padding: 0 15px" @click="toggleClick">
    <svg-icon
      iconClass="hamburger"
      className="hamburger"
      :class="{ 'is-active': isActive }"
    />
  </div>

  -----------appMain------------------<br />
  <SvgIcon iconClass="user" className="user" />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Home",
  setup(props, ctx) {
    const isActive = ref(true);
    const toggleClick = () => {
      ctx.emit("toggleClick");
    };
    return { isActive, toggleClick };
  },
});
</script>

<style lang="scss" scoped>
.hamburger.svg-icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger:hover {
  color: var(--theme);
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>